<template>
  <el-card style='margin:10px;padding:10px'>
    <vxe-toolbar id="warehouseLocationId" :custom="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="findList">查询</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      align="center"
      show-footer
      highlight-hover-row
      row-id="id"
      class="mytable-footer"
      :export-config='{type:"csv"}'
      height="600"
      :loading="loading"
      :data="tableData"
    >
      <vxe-table-column>
        <vxe-table-column field="deliveryCode" title="销售单号" min-width="200" sortable show-header-overflow show-overflow/>
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.deliveryCode" placeholder="销售单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="packingMaterialCode" title="包材编码" min-width="200" sortable show-header-overflow show-overflow/>
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.packingMaterialCode" placeholder="包材编码" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="packingMaterialName" title="包材名称" min-width="200" sortable show-header-overflow show-overflow/>
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.packingMaterialName" placeholder="包材名称" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="packingMaterialVolume" title="包材容积" min-width="200" sortable show-header-overflow show-overflow/>
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.packingMaterialVolume" placeholder="包材容积" clearable type='number'/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="modifiedName" title="修改人" min-width="200" sortable show-header-overflow show-overflow/>
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.modifiedName" placeholder="修改人" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="gmtModified" title="修改时间" min-width="400" sortable show-header-overflow show-overflow />
        <template v-slot:header="{ column }">
          <el-date-picker
            v-model="gmtModified"
            type="daterange"
            value-format="yyyy-MM-dd"
            style="width:100%"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtModified')"
          />
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </el-card>
</template>
<script>
import { packingMaterialRecord } from '@/api/packingMaterial/packingMaterial'

export default {
  data(){
    return{
      gmtModified:'',
      loading:false,
      listQuery:{
        pageNum:1,
        pageSize:10,
        total:0
      },
      tableData:[]
    }
  },
  created(){
    this.findList()
  },
  methods:{
    findList(){
      this.loading = true
      return new Promise((resolve)=>{
        packingMaterialRecord(this.listQuery).then(res=>{
          this.tableData = res.data.records
          this.listQuery.total = res.data.total
          this.loading = false
          resolve()
        })
      })
    },
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + " 00:00:00";
        this.listQuery[`${prefix}End`] = value[1] + " 23:59:59";
      } else {
        this.listQuery[`${prefix}Start`] = "";
        this.listQuery[`${prefix}End`] = "";
      }
    },
     // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    },
  }
}
</script>
